<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog v-model="props.dialogVisible" class="add_regional_library" title="查看详情" @close="handleVisible('cancel')" width="1200px">
    <div class="queryFormDiv">
      <el-form ref="queryFormHead" :model="queryForm" inline class="queryForm" size="small" label-width="100px">
        <el-form-item label="排号名称">
          <el-input v-model="queryForm.nameSource" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="queryForm.typeSource" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="search" @click="handleQuery">查询</el-button>
          <el-button size="small" icon="refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="previewDiv">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="公制" name="first">
          <el-card>
            <template #header>
              <div class="card-header">
                <el-button size="small" type="primary" icon="download" @click="handledownload">导出数据</el-button>
              </div>
            </template>
            <el-table :data="dataList" :loading="loading" :row-key="getRowKeys" height="500px" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                v-for="item in defaultColunms"
                :key="item.label"
                :label="item.label"
                :prop="item.prop"
                :fixed="item.fixed"
                :width="item.width"
                align="center"
              >
                <template #default="scope">
                  <span>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="英制" name="second">
          <el-card>
            <template #header>
              <div class="card-header">
                <el-button size="small" type="primary" icon="download" @click="handledownload">导出数据</el-button>
              </div>
            </template>
            <el-table :data="dataList" :loading="loading" :row-key="getRowKeys" height="500px" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                v-for="item in defaultColunms"
                :key="item.label"
                :label="item.label"
                :prop="item.prop"
                :fixed="item.fixed"
                :width="item.width"
                align="center"
              >
                <template #default="scope">
                  <span>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>
<script setup>
import { downloadFile } from '@/utils/index';
import { getFastenerNumber, getFastenerNumberList, exportData } from '@/api/fastenerData';
const props = defineProps(['dialogVisible', 'fastenerGradeSelect', 'diameterCodeSelect']);
const emit = defineEmits(['handleEvent']);
const dataList = ref([]);
const loading = ref(false);
const fastenerGradeList = ref([]);
const activeName = ref('first');
const queryParams = ref({
  fastenerGrade: '',
  diameterCode: '',
  dashNumber: ''
});
const queryForm = ref({
  typeSource: '',
  nameSource: '',
  fastenerGradeList: [],
  unit: 'metric'
});
const selectIds = ref([]);

const getRowKeys = (row) => {
  return row._id;
};
const handleSelectionChange = (val) => {
  selectIds.value = val.map((item) => item._id);
  console.log(selectIds.value);
};
const defaultColunms = ref([
  { label: '名称', prop: 'nameSource', fixed: 'left', width: '150px' },
  { label: '类型', prop: 'typeSource', fixed: null, width: '200px' },
  { label: '材料', prop: 'materialSource', fixed: null, width: '100px' },
  { label: '标准', prop: 'standardSource', fixed: null, width: '200px' },
  { label: '采购/技术规范', prop: 'procurementTechnicalSpecifications', fixed: null },
  { label: '技术规范', prop: 'technicalSpecifications', fixed: null },
  { label: 'G值(MPa)', prop: 'gMpaSource', fixed: null },
  { label: '说明', prop: 'descriptionSource', fixed: null, width: '250px' },
  { label: '直径D', prop: 'dSource', fixed: null },
  { label: '长度L', prop: 'lSource', fixed: null },
  { label: 'A值', prop: 'aSource', fixed: null },
  { label: 'H值（头部高度）', prop: 'hSource', fixed: null },
  { label: 'E值', prop: 'eSource', fixed: null },
  { label: '尺寸参考文献', prop: 'geoRefSource', fixed: null },
  { label: '拉伸许用载荷TF', prop: 'tensileForceSource', fixed: null },
  { label: '剪切许用载荷SF', prop: 'shearForceSource', fixed: null },
  { label: '是否双剪', prop: 'isDoubleSource', fixed: null },
  { label: '载荷参考文献', prop: 'forRefSource', fixed: null },
  { label: '拉伸许用应力TS', prop: 'tensileStressSource', fixed: null },
  { label: '剪切许用应力SS', prop: 'shearStressSource', fixed: null },
  { label: '应力参考文献', prop: 'stsRefSource', fixed: null },
  { label: '材料修正系数Kdc', prop: 'kdcSource', fixed: null },
  { label: '材料修正系数参考文献', prop: 'kdcRefSource', fixed: null },
  { label: '钉间失稳系数C', prop: 'connectionFactorSource', fixed: null },
  { label: '钉间失稳参考文献', prop: 'conRefSource', fixed: null },
  { label: '适用机型', prop: 'planeTypeSource', fixed: null },
  { label: '自带螺母直径', prop: 'selfContainedNutDiameter', fixed: null }
]);

const handleQuery = () => {
  console.log('handleQuery', queryForm.value);
  getListInfo();
};
const resetQuery = () => {
  queryForm.value.typeSource = '';
  queryForm.value.nameSource = '';
  console.log('resetQuery', queryForm.value);
  getListInfo();
};
const handleClick = () => {
  if (activeName.value === 'first') {
    activeName.value = 'second';
    queryForm.value.unit = 'imperial';
    getListInfo();
  } else {
    activeName.value = 'first';
    queryForm.value.unit = 'metric';
    getListInfo();
  }
};
const handleVisible = (type) => {
  if (type === 'cancel') {
    emit('handleEvent', { type: 'close' });
  } else {
    emit('handleEvent', { type: 'refresh' });
  }
};
const handledownload = () => {
  const queryParamsData = {
    ...queryForm.value,
    idList: selectIds.value,
    unit: activeName.value === 'first' ? 'metric' : 'imperial'
  };
  exportData(queryParamsData)
    .then((res) => {
      if (res?.code === 500) {
        ElMessage({ showClose: true, message: '下载失败。', type: 'error' });
        return;
      }
      downloadFile(res, '许用值详情', 'xlsx');
    })
    .catch(() => {
      loading.value = false;
    });
};
const getListData = () => {
  loading.value = true;
  getFastenerNumber(queryParams.value).then((res) => {
    const result = res && res?.data;
    queryForm.value.fastenerGradeList = result;
    console.log(' queryForm.value', queryForm.value);
    fastenerGradeList.value = result;
    getListInfo();
  });
};
const getListInfo = () => {
  console.log('getFastenerNumberList：queryForm.value', queryForm.value);
  getFastenerNumberList(queryForm.value).then((res) => {
    const result = res && res?.data;
    dataList.value = result;
    loading.value = false;
  });
};
watch(
  () => [props.fastenerGradeSelect, props.diameterCodeSelect],
  ([newFastenerGradeSelect, newDiameterCodeSelect]) => {
    if (newFastenerGradeSelect && newDiameterCodeSelect) {
      queryParams.value.fastenerGrade = newFastenerGradeSelect;
      if (/^\d+$/.test(newDiameterCodeSelect)) {
        queryParams.value.diameterCode = newDiameterCodeSelect;
      } else if (/^\d+\.\d+$/.test(newDiameterCodeSelect)) {
        queryParams.value.dashNumber = newDiameterCodeSelect;
      }
      nextTick(() => {
        getListData();
      });
    }
  },
  { deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.queryFormDiv {
  margin-top: 10px;
  margin-right: 5px;
  .queryForm {
    border: 1px solid #dddddd7a;
    padding: 20px 20px 10px 20px;
  }
  .queryBtn {
    padding-left: 120px;
  }
}
.previewDiv {
  border: 1px solid #dddddd7a;
  padding: 20px 20px 10px 20px;
  margin-top: 10px;
}
</style>
